<template>
    <div class="page-role page-full">
        <div class="page-action">
            <div class="left">
                <a-button type="primary" @click="$Method.onDataAction('insertData', {})">添加</a-button>
            </div>
            <div class="right">
                <a-input placeholder="请输入搜索关键字" allow-clear></a-input>
                <div class="w-10px"></div>
                <a-button type="primary">搜索</a-button>
            </div>
        </div>
        <div class="page-table">
            <a-table :data="$Data.tableData" :scroll="$GlobalData.tableScroll" :pagination="false" :bordered="$GlobalData.tableBordered" row-key="id">
                <template #columns>
                    <a-table-column title="名称" data-index="name" :width="200"></a-table-column>
                    <a-table-column title="编码" data-index="code" :width="150"></a-table-column>
                    <a-table-column title="描述" data-index="describe" :width="300" ellipsis tooltip></a-table-column>
                    <a-table-column title="菜单" data-index="menu_ids" :width="500"></a-table-column>
                    <a-table-column title="接口" data-index="api_ids" :width="500"></a-table-column>
                    <a-table-column title="创建时间" data-index="created_at2" :width="150"></a-table-column>
                    <a-table-column title="更新时间" data-index="updated_at2" :width="150"></a-table-column>
                    <a-table-column title="操作" fixed="right" :width="100" align="right">
                        <template #cell="{ record }">
                            <a-dropdown position="br" @select="$Method.onDataAction($event, record)">
                                <a-button>操作<icon-down /></a-button>
                                <template #content>
                                    <a-doption value="updateData"><icon-edit />编辑</a-doption>
                                    <a-doption value="permissionData"><icon-branch />权限</a-doption>
                                    <a-doption value="deleteData"> <icon-delete />删除</a-doption>
                                </template>
                            </a-dropdown>
                        </template>
                    </a-table-column>
                </template>
            </a-table>
        </div>
        <div class="page-page">
            <div class="left"></div>
            <div class="right">
                <a-pagination :total="$Data.pagination.total" show-total />
            </div>
        </div>

        <!-- 编辑数据抽屉 -->
        <editDataDrawer v-if="$Data.isShow.editDataDrawer" v-model="$Data.isShow.editDataDrawer" :pageConfig="$Data.pageConfig" :actionType="$Data.actionType" :rowData="$Data.rowData" @success="$Method.fnFreshData()"></editDataDrawer>

        <!-- 编辑权限抽屉 -->
        <editPermissionDrawer v-if="$Data.isShow.editPermissionDrawer" v-model="$Data.isShow.editPermissionDrawer" :pageConfig="$Data.pageConfig" :rowData="$Data.rowData" @success="$Method.fnFreshData()"></editPermissionDrawer>
    </div>
</template>

<script setup>
// 内部集
import editDataDrawer from './components/editDataDrawer.vue';
import editPermissionDrawer from './components/editPermissionDrawer.vue';

// 选项集
defineOptions({
    name: 'role'
});

// 全局集
let { $GlobalData, $GlobalComputed, $GlobalMethod } = useGlobal();

// 工具集
let $Router = useRouter();

// 数据集
let $Data = $ref({
    // 页面配置
    pageConfig: {
        name: '角色',
        name2: '权限'
    },
    // 显示和隐藏
    isShow: {
        editDataDrawer: false,
        editPermissionDrawer: false,
        deleteDataDialog: false
    },
    actionType: 'insertData',
    // 表格数据
    tableData: [],
    // 行数据
    rowData: {},
    // 分页组件数据
    pagination: {
        page: 1,
        limit: 20,
        total: 0
    }
});

// 方法集
let $Method = {
    // 初始化数据
    async initData() {
        await $Method.apiSelectData();
    },
    // 触发数据事件
    onDataAction(actionType, rowData) {
        $Data.actionType = actionType;
        $Data.rowData = rowData;

        // 编辑数据
        if ($Data.actionType === 'insertData' || $Data.actionType === 'updateData') {
            $Data.isShow.editDataDrawer = true;
            return;
        }

        // 删除数据
        if ($Data.actionType === 'deleteData') {
            $Data.isShow.deleteDataDialog = true;
            return;
        }

        // 设置权限
        if ($Data.actionType === 'permissionData') {
            $Data.isShow.editPermissionDrawer = true;
            return;
        }
    },
    // 刷新数据
    async fnFreshData() {
        await $Method.apiSelectData();
    },
    // 查询用户数据
    async apiSelectData() {
        try {
            let res = await $Http({
                url: '/role/select',
                data: {
                    page: $Data.pagination.page,
                    limit: $Data.pagination.limit
                }
            });
            $Data.tableData = utilCoverRelativeTime(res.data.rows);
            $Data.pagination.total = res.data.total;
        } catch (err) {
            console.log('🚀 ~ file: index.vue:122 ~ apiSelectData ~ err:', err);
        }
    }
};

$Method.initData();
</script>

<style lang="scss" scoped>
.page-role {
}
</style>
